<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- Top Bar -->
<nav th:fragment="commonBar" class="navbar">
    <div class="col-12">
        <div class="navbar-header">
            <a href="javascript:void(0);" class="bars"></a>
            <a class="navbar-brand" href="/hospital/index"><img src="/assets/images/logo.svg" width="30" alt="Compass"><span class="m-l-10">平顶山学院附属口腔医院</span></a>
        </div>
        <ul class="nav navbar-nav navbar-left">
            <li><a href="javascript:void(0);" class="ls-toggle-btn" data-close="true"><i class="zmdi zmdi-swap"></i></a></li>
            <li class="hidden-sm-down">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search...">
                    <span class="input-group-addon">
                        <i class="zmdi zmdi-search"></i>
                    </span>
                </div>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="javascript:void(0);" class="fullscreen hidden-sm-down" data-provide="fullscreen" data-close="true"><i class="zmdi zmdi-fullscreen"></i></a>
            </li>
            <li><a  class="mega-menu" data-close="true" onclick="logout()"><i class="zmdi zmdi-power"></i></a></li>
            <li class=""><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></a></li>
        </ul>
    </div>
</nav>

<!-- Left Sidebar -->
<aside th:fragment="commonLeft" id="leftsidebar" class="sidebar">
    <div class="menu">
        <ul class="list">
            <li>
                <div class="user-info">
                    <div class="image"><a><img src="" value="" id="photo" alt="User"></a></div>
                    <div class="detail">
                        <h4 id="realName"></h4>
                        <small id="perms"></small>
                    </div>
                    <input type="hidden" id="p_user_id" value="">
                    <input type="hidden" id="p_user_password" value="">
                    <input type="hidden" id="p_user_username" value="">
                    <a onclick="gotoUpdatePwd()" title="修改密码和个人信息"><i class="zmdi zmdi-account-box-phone"></i></a>
                    <a title="退出登录"  onclick="logout()"><i class="zmdi zmdi-power"></i></a>
                </div>
            </li>
            <li class="active open"><a href="/hospital/index"><i class="zmdi zmdi-home"></i><span>首页</span></a></li>
            <li class="li-ul" id="doctor"><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-account-add"></i><span>医生</span> </a>
                <ul class="ml-menu">
                    <li class="li-a" data-toggle="doctors"><a>医生列表</a></li>
                    <li class="li-a" data-toggle="add-doctor"><a >添加医生</a></li>
                    <!--                    <li class="li-a" data-toggle="profile"><a>个人详情</a></li>-->
                </ul>
            </li>
            <li class="li-ul"><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-account-o"></i><span>病人</span> </a>
                <ul class="ml-menu">
                    <li class="li-a" data-toggle="patients"><a>病人列表</a></li>
                    <li class="li-a" data-toggle="add-patient"><a>添加病人</a></li>
                </ul>
            </li>
        </ul>
    </div>
</aside>

<!-- Right Sidebar -->
<aside th:fragment="commonRight" id="rightsidebar" class="right-sidebar">
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#setting"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active slideRight" id="setting">
            <div class="slim_scroll">
                <div class="card">
                    <h6>皮肤</h6>
                    <ul class="choose-skin list-unstyled">
                        <li data-theme="purple">
                            <div class="purple"></div>
                        </li>
                        <li data-theme="blue">
                            <div class="blue"></div>
                        </li>
                        <li data-theme="cyan" class="active">
                            <div class="cyan"></div>
                        </li>
                        <li data-theme="green">
                            <div class="green"></div>
                        </li>
                        <li data-theme="orange">
                            <div class="orange"></div>
                        </li>
                        <li data-theme="blush">
                            <div class="blush"></div>
                        </li>
                    </ul>
                </div>
                <div class="card">
                    <h6>左侧菜单栏</h6>
                    <ul class="list-unstyled theme-light-dark">
                        <li>
                            <div class="t-light btn btn-default btn-simple btn-round">Light</div>
                        </li>
                        <li>
                            <div class="t-dark btn btn-default btn-round">Dark</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</aside>

<script th:fragment="commonJs" type="text/javascript">

    function showPage(url) {
        var arr = ["doctors","add-doctor","patients","add-patient","patient-profile","update-doctor","update-patient","update-person"]
        for (var i = 0; i < arr.length ;i++) {
            if (url.search(arr[i])!==-1) {//判断url是否含有指定路径
                $(document.getElementById(arr[i])).css("display","")
            }
            else
            {
                $(document.getElementById(arr[i])).css("display","none")
            }
        }
    }

    $(".li-a").click(function () {
        //获取点击的路径
        var url = $(this).attr("data-toggle");
        //如果已选择li则退出
        if($(this).hasClass("active")){
            return;
        } else {
            //清除已选中的li样式,子节点也要清除
            $(".li-a.active").removeClass("active");
            $(".waves-effect.waves-block.toggled").removeClass("toggled");
            //设置当前li样式
            $(this).addClass("active");
            $(this).children("a:eq(0)").addClass("toggled")
        }
        //ajax请求页面
        if(url === "patients") {
            var param = "?pageNo=1&pageSize=20"
            showPatientsList(1)
        }
        else if(url === "doctors") {
            showList(1)
        }
        else {
            param = ""
        }
        ajaxUtil.getPage(url,null,param);
        //设置文本
        var title = $(this).children("span").text();
        $("#div_home_title").children("span").text(title);
        document.title = "平顶山市口腔医院 - "+url;
    });
    //点击关闭li触发所有高亮的选项恢复原样
    $(".li-ul").click(function (){
        if ($(this).children("a:eq(0)").hasClass("toggled")) {
            $(".li-a.active").removeClass("active");
            $(".waves-effect.waves-block.toggled").removeClass("toggled");
        }
    });


    // 修改密码
    function gotoUpdatePwd(){
        d_selectPerson($("#p_user_id").val())
    }

    // 跳转到修改个人信息
    function d_selectPerson(){
        Dropzone.forElement("#person_frmFileUpload").removeAllFiles(true);
        $("#person_image_show").innerHTML=""
        showPage("update-person")
        $("#person_id").val($("#p_user_id").val())
        $("#person_password").val($("#p_user_password").val())
        $("#person_realname").val($("#realName").text())
        var res = [];
        res.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20">');
        res.push('<a href=' +  $("#photo").attr('value')+ ' target="_blank">')
        res.push('<img class="img-fluid img-thumbnail" id="person_image" value="'+ $("#photo").attr('value')  +'" src=' + $("#photo").attr('value') + ' alt="">')
        res.push('</a>')
        res.push('</div>');
        $('#person_image_show').html(res.join(""))
    }


    //获取单个病人信息
    function p_select(pid) {
        Dropzone.forElement("#frmFileUpload3").removeAllFiles(true);
        $("#p_image_before").innerHTML=""
        $("#p_image_middle").innerHTML=""
        $("#p_image_after").innerHTML=""
        $.ajax({
            url: "/hospital/patient/getOne/"+pid,
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (data.code === 200) {
                    showPage("update-patient")
                    $("#p_filenames_delete").attr('value',"");
                    $("#p_filenames_add").attr('value',"");
                    $("#p_id").val(pid);
                    $("#p_name").val(data.data.patient.name)
                    $("#p_sex").selectpicker('val',data.data.patient.sex);
                    $("#p_phone").val(data.data.patient.phone)
                    $("#p_age").val(data.data.patient.age)
                    $("#p_startPatientTime").val(data.data.patient.startTime.replace("T"," "))
                    $("#p_describe").val(data.data.patient.profile)
                    var before = [];
                    var middle = [];
                    var after = [];
                    for (var i = 0; i < data.data.images.length; i++){
                        if (data.data.images[i].imageNum === 0 ){
                            before.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20" id="p_update_image'+ i +'">');
                            before.push('<a href='+data.data.images[i].image+' target="_blank">')
                            before.push('<img class="img-fluid img-thumbnail" id="p_image'+ i +'" value="'+data.data.images[i].image +'" src='+data.data.images[i].image+'  alt=""/>')
                            before.push('</a>')
                            before.push('<p class="pos-abs">'+data.data.images[i].imageName+'</p>')
                            before.push('<a class="btn btn-danger" onclick="deleteUpdate('+ i +')">删除</a>')
                            before.push('</div>');
                        }else if(data.data.images[i].imageNum === 1){
                            middle.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20" id="p_update_image'+ i +'">');
                            middle.push('<a href='+data.data.images[i].image+' target="_blank">')
                            middle.push('<img class="img-fluid img-thumbnail" id="p_image'+ i +'" value="'+data.data.images[i].image +'" src='+data.data.images[i].image+'  alt=""/>')
                            middle.push('</a>')
                            middle.push('<p class="pos-abs">'+data.data.images[i].imageName+'</p>')
                            middle.push('<a class="btn btn-danger" onclick="deleteUpdate('+ i +')">删除</a>')
                            middle.push('</div>');
                        }else if(data.data.images[i].imageNum === 2){
                            after.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20" id="p_update_image'+ i +'">');
                            after.push('<a href='+data.data.images[i].image+' target="_blank">')
                            after.push('<img class="img-fluid img-thumbnail" id="p_image'+ i +'" value="'+data.data.images[i].image +'" src='+data.data.images[i].image+'  alt=""/>')
                            after.push('</a>')
                            after.push('<p class="pos-abs">'+data.data.images[i].imageName+'</p>')
                            after.push('<a class="btn btn-danger" onclick="deleteUpdate('+ i +')">删除</a>')
                            after.push('</div>');
                        }
                    }
                    $('#p_image_before').html(before.join(""))
                    $('#p_image_middle').html(middle.join(""))
                    $('#p_image_after').html(after.join(""))
                }else {
                    alert("出现错误，请重试")
                }
            }
        })
    }

    // 更新界面点击删除按钮   索引值  图片的id
    function deleteUpdate(i) {
        var str = $("#p_filenames_delete").attr('value');
        if (str === ""){
            str = $("#p_image"+i).attr('value');
        }else {
            str = str +","+ $("#p_image"+i).attr('value');
        }
        $("#p_filenames_delete").attr("value",str);
        // 删除节点
        document.getElementById("p_update_image"+i).remove();
    }


    function showPatientsList(pageNo) {
        var searchName = $("#patient_name").val()
        var pageSize = 1
        $("#doctor-list").empty();//显示前 清空原列表
        // $("#message").hide()
        $.ajax({
            url:"/hospital/patients/list?pageNo="+pageNo+"&pageSize=20&name="+searchName,
            type:"post",
            dataType:"json",
            data: JSON.stringify({
                pageNo:pageNo,
                pageSize:pageSize,
                name:searchName
            }),
            contentType: "application/json;charset=utf-8",
            success:function (data){
                if (data.code === 200){
                    var page = data.data;
                    var list = page.records;
                    var res = [];
                    var pageno=page.current;               //当前页
                    for (var i = 0; i < list.length; i++){
                        res.push('<tr>');
                        // res.push('<td><span class="list-icon"><img class="patients-img" src="'+ "list[i].image" +'"></span>')
                        res.push('<td align="center" >' + list[i].pid + '</td>');
                        res.push('<td><span class="list-name">' + list[i].name +'</span></td>')
                        res.push('<td>' + list[i].sex +'</td>')
                        res.push('<td><span class="list-age">' + list[i].age +'</span></td>')
                        res.push('<td><span class="list-age">' + list[i].phone +'</span></td>')
                        res.push('<td>' + list[i].createTime.replace("T"," ") +'</td>')
                        res.push('<td>' + list[i].updateTime.replace("T"," ") +'</td>')
                        res.push('<td><button type="button" class="btn btn-sm btn-info" value="' + list[i].pid + '" onclick="lookPatient(this.value)">查看</button>')
                        res.push('<td><button type="button" class="btn btn-sm btn-info" value="' + list[i].pid + '" onclick="p_select(this.value)">修改</button>')
                        res.push('<td><button type="button" class="btn btn-sm btn-danger" value="' + list[i].pid + '" onclick="deletePatient(this.value,pageno)">删除</button></td>')
                        res.push('</tr>');
                    }
                    $("#patient-list").html(res.join(""))
                    var a = document.getElementById("patient-list").getElementsByTagName("tr");

                    var pagesize=page.size;            //每页多少条信息
                    $("#patient_pages").text(page.pages);      //将总页数的值存放到div中，便于下次使用
                    $("#patient_total").text(page.total);      //将总记录数的值存放到div中，便于下次使用
                    p_change(page.current,page.pages,page.size,page.total);
                }else {
                    $("#message").show()
                    $("#message").val(data.message).html()
                }
            }
        })
    }

    function p_change(e,pages,size,total){
        var pagesize=size;   //每页多少条信息
        pageall=pages;     //总页数
        pageno=e;        //当前页
        if(e <1)//如果输入页<1页
        { e=1;pageno=1}//就等于第1页 ， 当前页为1
        if(e>pageall)//如果输入页大于最大页
        {e=pageall;pageno=pageall}//输入页和当前页都=最大页
        var ye="";
        for(var j=1;j<=pageall;j++)
        {
            if(e==j)
            {ye=ye+"<span><a href='#' onClick='p_change1("+j+")' class='page-item active'>"+j+"</a></span> "}
            else
            {ye=ye+"<a href='#' class='page-item' onClick='p_change1("+j+")'>"+j+"</a> "}
        }
        document.getElementById("p_pageall").innerHTML=pageall;
        document.getElementById("p_pageno").innerHTML=pageno;
        document.getElementById("p_pagenum").innerHTML=ye;
        document.getElementById("p_total").innerHTML=total

        /*如果当前是第一页则：*/

        if (pageno === 1)
        {
            $('#p_down').hide();//隐藏
        }else {
            $('#p_down').show();//显示
        }

        /*如果是最后一页则：*/

        if (pageno === pageall)
        {
            $('#p_up').hide();//隐藏
        }else {
            $('#p_up').show();//显示
        }
        //  如果没有数据
        if (pageno === 0 && pageall === 0){
            $('#p_up').hide();//隐藏
            $('#p_down').hide();//隐藏
        }

    }
    function p_change1(e){
        pageall=$("#patient_pages").text();
        pageno=e;
        /*如果当前是第一页则：*/
        if(e <1)//如果输入页<1页
        { e=1;pageno=1}//就等于第1页 ， 当前页为1
        if(e>pageall)//如果输入页大于最大页
        {e=pageall;pageno=pageall}//输入页和当前页都=最大页

        showPatientsList(pageno)

        if (pageno === 1)
        {
            $('#p_down').hide();//隐藏
        }else {
            $('#p_down').show();//显示
        }

        /*如果是最后一页则：*/

        if (pageno === pageall)
        {
            $('#p_up').hide();//隐藏
        }else {
            $('#p_up').show();//显示
        }
    }
    $("#patient_name").keydown(function (e) {
        if (e.keyCode === 13) {
            showPatientsList(1)
        }
    });

    function deletePatient(value,pageNo) {
        if (confirm("是否要删除？")){
            $.ajax({
                url:"/hospital/patient/delete?id="+value,
                type: "delete",
                data:{
                    id : value
                },
                success:function (data){
                    if (data.code === 200){
                        alert(data.message)
                        showPatientsList(pageNo);
                    }else{
                        alert(data.message)
                    }
                }
            })
        }
    }

    //查询病人信息
    function lookPatient(pId) {
        $('#aniimated-thumbnials').innerHTML=""
        //显示页面
        showPage("patient-profile")
        $.ajax({
            url:"/hospital/patient-detail?pId="+pId,
            type:"post",
            dataType:"json",
            data: JSON.stringify({
            pId:pId
            }),
            contentType: "application/json;charset=utf-8",
            success:function (data){
                var res = [];
                var patient = data.data.patient;
                $("#pInf_name").text(patient.name)
                $("#pInf_age").text(data.data.patient.age);
                if (data.data.patient.sex===1){
                    $("#pInf_sex").text("男");
                }else if (data.data.patient.sex === 2){
                    $("#pInf_sex").text("女");
                }
                $("#pInf_phone").text(data.data.patient.phone);
                $("#pInf_startTime").text(data.data.patient.startTime.replace("T"," "));
                $("#pInf_updateTime").text(data.data.patient.updateTime.replace("T"," "));
                $('#pInf_id').attr('value',data.data.patient.pid);
                $("#pInf_profile").text(data.data.patient.profile);

                var before = [];
                var middle = [];
                var after = [];
                for (var i = 0; i < data.data.images.length; i++){
                    if (data.data.images[i].imageNum === 0){
                        before.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20">');
                        before.push('<a href='+data.data.images[i].image+' target="_blank">')
                        before.push('<img class="img-fluid img-thumbnail" src='+data.data.images[i].image+' alt="">')
                        before.push('</a>')
                        before.push('<p class="pos-abs">'+data.data.images[i].imageName+'</p>')
                        before.push('</div>');
                    }else if (data.data.images[i].imageNum === 1){
                        middle.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20">');
                        middle.push('<a href='+data.data.images[i].image+' target="_blank">')
                        middle.push('<img class="img-fluid img-thumbnail" src='+data.data.images[i].image+' alt="">')
                        middle.push('</a>')
                        middle.push('<p class="pos-abs">'+data.data.images[i].imageName+'</p>')
                        middle.push('</div>');
                    }else if(data.data.images[i].imageNum === 2){
                        after.push('<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-20">');
                        after.push('<a href='+data.data.images[i].image+' target="_blank">')
                        after.push('<img class="img-fluid img-thumbnail" src='+data.data.images[i].image+' alt="">')
                        after.push('</a>')
                        after.push('<p class="pos-abs">'+data.data.images[i].imageName+'</p>')
                        after.push('</div>');
                    }
                }
                $('#aniimated-thumbnials_before').html(before.join(""))
                $('#aniimated-thumbnials_middle').html(middle.join(""))
                $('#aniimated-thumbnials_after').html(after.join(""))
            }});
    }

    //页面和数据交互工具
    var ajaxUtil = {
        getPage:
            function (url,data,param) {
                if(url !== null && url !== ""){
                    $.ajax({
                        url: "/hospital/"+url,
                        type: "post",
                        data: data,
                        contentType: "text/html;charset=UTF-8",
                        success : function (data) {
                            showPage(url)
                        }
                    });
                    console.debug(url);
                }
            }
    };

    $(function () {
        $.ajax({
            url: "/hospital",
            type: "post",
            contentType: "text/html;charset=UTF-8",
            success : function (data) {
                var doc = data.data;
                console.log(doc.perms)
                if (doc.perms === 'admin'){
                    $("#perms").html("管理员")
                }else {
                    $("#perms").html("用户")
                }
                $("#realName").html(doc.realName)
                $("#p_user_id").attr('value',doc.id)
                $("#p_user_password").attr('value',doc.password)
                $("#p_user_username").attr('value',doc.userName)
                document.getElementById ('photo').src=doc.image;
                $("#photo").attr('value',doc.image)
                if (doc.perms === 'admin'){
                    $("#doctor").show()
                }else{
                    $("#doctor").hide()
                }
            }
        })
    })

    function logout() {
        if (confirm("是否要退出当前登录？")){
            $.ajax({
                type:"get",
                url:"/hospital/logout",
                contentType: "text/html;charset=UTF-8",
                success:function (data) {
                    if (data.code === 200){
                        location.reload();
                    }else {
                        alert(data.msg);
                    }
                }
            })
        }
    }

    // 返回列表页
    function backPatient() {
        if (!$("#p_pageno").text() === ''){
            showList($("#p_pageno").text())
            console.log($("#p_pageno").text())
        }else{
            showPatientsList(1)
            console.log(123)
        }

        showPage("patients")
    }

    // 返回列表页
    function backDoctors() {
        if (!$("#d_pageno").text() === ''){
            showList($("#d_pageno").text())
        }else{
            showList(1)
            console.log(123)
        }
        showPage("doctors")
    }
</script >
